<template>
<div class="editViews-box">
    <div ><nav-bar ></nav-bar></div>
  <div  class="editViews">
      

      <div class="line" >
        <span>昵称</span>
        <input type="text" class="in" v-model="info.name" >
      </div>

      <div class="line">
        <span>账号</span>
        <input type="text" class="in" v-model="info.phone" disabled >
      </div>

      <div class="line">
        <span>性别</span>
        <span style="float: right; margin-right: 1vw;">
        <el-radio v-model="info.gender" label="F">女</el-radio>
        <el-radio v-model="info.gender" label="M">男</el-radio>
        </span>
      </div>

      <div class="line">
        <span>个性签名</span>
        <input type="text" class="in" v-model="info.cardCase"  >
      </div>

      
      <div class="editback" >
       
        <span  @click="$router.back()" style="cursor: pointer;">返回个人中心</span>
        <button @click="change">确认</button>
       
      </div>
      
      
  </div>
</div>
</template>

<script>
import NavBar from '@/components/common/Navbar.vue'
import editBanner from '@/components/common/editBanner.vue'
import { mapGetters ,mapActions} from "vuex";
export default {
    data() {
        return {
            info:null
        }
    },
    components:{
        NavBar,
        editBanner
    },
    computed: {
    ...mapGetters(["user"]),
  },
    methods:{
      ...mapActions(["UserUpdate"]),
      
     async change(){
       await this.UserUpdate(this.info)
       this.$msg.fail("修改成功")
      }
       

    },

beforeMount() {
  this.info = { ...this.user }
}
  
   

}
</script>

<style scoped lang="less">
.editViews-box {
    height: 100vh;
    background:url('/src/static/imgs/background.png') no-repeat;
}
.editViews {
    background-color: rgba(255, 255, 255,.8);
    margin: auto;
    width: 45%;
    border: 1px solid #eee;
    border-radius: 1vw;
    box-shadow: 0px 1px 2px 3px #eee;
    margin-top: 10vh;

    .line{
        margin-top: 5vh;
      

        span{
            margin-left: 1vw;
        }

        input {
            float: right;
            padding-right: 1vw;
            width: 80%;
            text-align:right;
            background:transparent;
        }
    }
}


.editback{
    margin-top: 1.556vw;
   background-color: rgba(255, 255, 255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    padding: 4.167vw 0;
    font-size: 1.5vw;
    
    button{
      margin-left: 10vw;
      color: #9dc7f3;
    }
}


</style>